
require(['./config'], () => {
    require(['template', 'header', 'footer'], (template) => {
        class List {
            constructor() {
                this.getcon1()
                this.getcon2()
                this.getId()
                this.all()
                this.Life()
                this.shoubiao()
                this.Peijian()
                this.Listen()
            }
            getcon1() {
                // 根据数据用air-template渲染页面
                $.get('/libs/json/list-con1.json', resp => {
                    // console.log(resp)
                    $('#con1').html(template('category1', { list: resp }))
                    // 点击价格按钮实现价格排序
                    let flag = true
                    $('#sortprice').on('click', function () {
                        // 点击价格按钮
                        if (flag) {
                            flag = !flag
                            resp.sort(function (a, b) {
                                // console.log(a.price)
                                return a.price - b.price
                            })
                            // 重新渲染页面
                            $('#con1').html(template('category1', { list: resp }))
                        } else {
                            resp.sort((a, b) => {
                                return b.price - a.price
                            })
                            // console.log(resp)
                            // 重新渲染页面
                            $('#con1').html(template('category1', { list: resp }))
                            flag = !flag
                        }
                    })
                })

            }
            getcon2() {
                // 根据数据用air-template渲染页面
                $.get('/libs/json/list-con2.json', resp => {
                    // console.log(resp)
                    $('#con2').html(template('category2', { list: resp }))
                })
            }
            getId() {
                // 获取id
                const id = window.location.search.slice(1).split('&').reduce((obj, item) => {
                    var arr = item.split('=')
                    obj[arr[0]] = arr[1]
                    return obj
                    // console.log(obj)
                }, {}).id
                // console.log(id)
            }
            all() {
                const _this = this
                // 点击所有商品
                $('#allShop').on('click', function() {
                    // 切换当前背景色
                    $(this).siblings().css('background','none')
                    $(this).css('background','#666')
                    _this.getcon1() 
                })
            }
            shaiXuan(list){
                // 筛选类别
                // console.log(list)
                $('#con1').html(template('category1', { list }))
                let flag = true
                $('#sortprice').on('click', function () {
                    // 点击价格按钮
                    if (flag) {
                        flag = !flag
                        list.sort(function (a, b) {
                            return a.price - b.price
                        })
                        // 重新渲染页面
                        $('#con1').html(template('category1', { list }))
                    } else {
                        list.sort((a, b) => {
                            return b.price - a.price
                        })
                        // console.log(resp)
                        // 重新渲染页面
                        $('#con1').html(template('category1', { list }))
                        flag = !flag
                    }
                    return
                })
            }
            Life() {
                const _this = this
                // 点击生活筛选
                $('#life').on('click', function(){
                    // 切换当前背景色
                    $(this).siblings().css('background','none')
                    $(this).css('background','#666')
                    $.get('/libs/json/list-con1.json', resp => {
                        let list = resp.filter(shop => {
                            console.log(shop.con1)
                            return shop.con1
                        })
                        // 调用筛选方法 重新渲染
                        _this.shaiXuan(list)
                    })
                })
            }
            shoubiao() {
                const _this = this
                // 点击智能穿戴筛选
                $('#shouBiao').on('click', function() {
                    // 切换当前背景色
                    $(this).siblings().css('background','none')
                    $(this).css('background','#666')
                    $.get('/libs/json/list-con1.json', resp => {
                        let list = resp.filter(shop => {
                            console.log(shop.con2)
                            return shop.con2
                        })
                        // 调用筛选方法 重新渲染
                        _this.shaiXuan(list)
                    })
                })
            }
            Peijian() {
                const _this = this
                // 点击配件筛选
                $('#peijian').on('click', function() {
                    // 切换当前背景色
                    $(this).siblings().css('background','none')
                    $(this).css('background','#666')
                    $.get('/libs/json/list-con1.json', resp => {
                        let list = resp.filter(shop => {
                            console.log(shop.con3)
                            return shop.con3
                        })
                        // 调用筛选方法 重新渲染
                        _this.shaiXuan(list)
                    })
                })
            }
            Listen() {
                const _this = this
                // 点击声学筛选
                $('#listen').on('click', function() {
                    // 切换当前背景色
                    $(this).siblings().css('background','none')
                    $(this).css('background','#666')
                    $.get('/libs/json/list-con1.json', resp => {
                        let list = resp.filter(shop => {
                            console.log(shop.con4)
                            return shop.con4
                        })
                        // 调用筛选方法 重新渲染
                        _this.shaiXuan(list)
                    })
                })
            }
        }
        new List()
    })
})